<template>
  <div class="max-w-6xl mx-auto p-6 min-h-screen bg-gradient-to-br from-slate-50 to-emerald-50">
    
    <!-- 页面标题 -->
    <div class="text-center mb-8 p-8 bg-white rounded-2xl shadow-lg">
      <h2 class="flex items-center justify-center gap-3 text-3xl font-semibold text-gray-800 mb-2">
        <n-icon class="text-4xl text-emerald-500" :component="DocumentTextIcon" />
        入党志愿书编辑
      </h2>
      <p class="text-gray-600">请完善入党志愿书相关信息</p>
    </div>

    <!-- 提示信息模块 -->
    <div class="mb-6 bg-gradient-to-r from-emerald-50 to-green-50 border border-emerald-200 rounded-2xl p-6 shadow-sm">
      <div class="flex items-center gap-3 mb-4">
        <n-icon class="text-2xl text-emerald-600" :component="InfoIcon" />
        <h3 class="text-lg font-semibold text-emerald-800">重要提示信息</h3>
      </div>
      <div class="space-y-2">
        <div v-for="(tip, index) in tipMessages" :key="index" class="flex items-start gap-3 text-sm text-emerald-700">
          <div class="flex-shrink-0 w-1.5 h-1.5 bg-emerald-500 rounded-full mt-2"></div>
          <span>{{ tip }}</span>
        </div>
      </div>
    </div>

    <n-form ref="formRef" :model="formValue" label-placement="top" label-align="left" label-width="auto">
      
      <!-- 预备党员接受阶段 -->
      <n-card class="mb-6 rounded-2xl border-0 shadow-lg bg-white overflow-hidden" title="" :bordered="false">
        <template #header>
          <div class="flex items-center gap-3 py-2">
            <n-icon class="text-xl text-blue-500" :component="PersonAddIcon" />
            <span class="text-lg font-semibold text-gray-800">预备党员接受阶段</span>
          </div>
        </template>

        <n-grid :cols="12" :x-gap="16" :y-gap="12">
          <!-- 本人信息 -->
          <n-gi :span="12">
            <div class="mb-4 pb-3 border-b border-slate-100">
              <h4 class="text-md font-medium text-slate-700 mb-3 flex items-center gap-2">
                <n-icon :component="PersonIcon" class="text-blue-400" />
                本人信息
              </h4>
            </div>
          </n-gi>
          <n-gi :span="4">
            <n-form-item label="本人处落款时间" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-date-picker
                v-model:formatted-value="formValue.applicationVolunteer.personalSignatureDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择落款时间"
                style="width: 100%"
                class="rounded-lg"
                size="large"
                @update:formatted-value="handleInputChange"
              />
            </n-form-item>
          </n-gi>

          <!-- 入党介绍人1 -->
          <n-gi :span="12">
            <div class="mb-4 pb-3 border-b border-slate-100">
              <h4 class="text-md font-medium text-slate-700 mb-3 flex items-center gap-2">
                <n-icon :component="PeopleIcon" class="text-blue-400" />
                入党介绍人1
              </h4>
            </div>
          </n-gi>
          <n-gi :span="6">
            <n-form-item label="入党介绍人1签名" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-input
                v-model:value="formValue.applicationVolunteer.sponsor1Signature"
                placeholder="请输入介绍人1姓名"
                class="rounded-lg"
                size="large"
                @update:value="handleInputChange"
              />
            </n-form-item>
          </n-gi>
          <n-gi :span="6">
            <n-form-item label="入党介绍人1落款时间" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-date-picker
                v-model:formatted-value="formValue.applicationVolunteer.sponsor1SignatureDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择落款时间"
                style="width: 100%"
                class="rounded-lg"
                size="large"
                @update:formatted-value="handleInputChange"
              />
            </n-form-item>
          </n-gi>

          <!-- 入党介绍人2 -->
          <n-gi :span="12">
            <div class="mb-4 pb-3 border-b border-slate-100">
              <h4 class="text-md font-medium text-slate-700 mb-3 flex items-center gap-2">
                <n-icon :component="PeopleIcon" class="text-blue-400" />
                入党介绍人2
              </h4>
            </div>
          </n-gi>
          <n-gi :span="6">
            <n-form-item label="入党介绍人2签名" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-input
                v-model:value="formValue.applicationVolunteer.sponsor2Signature"
                placeholder="请输入介绍人2姓名"
                class="rounded-lg"
                size="large"
                @update:value="handleInputChange"
              />
            </n-form-item>
          </n-gi>
          <n-gi :span="6">
            <n-form-item label="入党介绍人2落款时间" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-date-picker
                v-model:formatted-value="formValue.applicationVolunteer.sponsor2SignatureDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择落款时间"
                style="width: 100%"
                class="rounded-lg"
                size="large"
                @update:formatted-value="handleInputChange"
              />
            </n-form-item>
          </n-gi>

          <!-- 支部大会决议 -->
          <n-gi :span="12">
            <div class="mb-4 pb-3 border-b border-slate-100">
              <h4 class="text-md font-medium text-slate-700 mb-3 flex items-center gap-2">
                <n-icon :component="BusinessIcon" class="text-blue-400" />
                支部大会决议
              </h4>
            </div>
          </n-gi>
          <n-gi :span="6">
            <n-form-item label="支部书记姓名" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-input
                v-model:value="formValue.applicationVolunteer.branchMeetingSecretaryName"
                placeholder="请输入支部书记姓名"
                class="rounded-lg"
                size="large"
                @update:value="handleInputChange"
              />
            </n-form-item>
          </n-gi>
          <n-gi :span="6">
            <n-form-item label="支部大会决议落款时间" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-date-picker
                v-model:formatted-value="formValue.applicationVolunteer.branchMeetingSignatureDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择落款时间"
                style="width: 100%"
                class="rounded-lg"
                size="large"
                @update:formatted-value="handleInputChange"
              />
            </n-form-item>
          </n-gi>

          <!-- 其他信息 -->
          <n-gi :span="12">
            <div class="mb-4 pb-3 border-b border-slate-100">
              <h4 class="text-md font-medium text-slate-700 mb-3 flex items-center gap-2">
                <n-icon :component="DocumentIcon" class="text-blue-400" />
                其他信息
              </h4>
            </div>
          </n-gi>
          <n-gi :span="4">
            <n-form-item label="指派专人谈话落款时间" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-date-picker
                v-model:formatted-value="formValue.applicationVolunteer.designatedTalkDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择落款时间"
                style="width: 100%"
                class="rounded-lg"
                size="large"
                @update:formatted-value="handleInputChange"
              />
            </n-form-item>
          </n-gi>
          <n-gi :span="4">
            <n-form-item label="党总支审查落款时间" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-date-picker
                v-model:formatted-value="formValue.applicationVolunteer.generalBranchReviewDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择落款时间"
                style="width: 100%"
                class="rounded-lg"
                size="large"
                @update:formatted-value="handleInputChange"
              />
            </n-form-item>
          </n-gi>
          <n-gi :span="4">
            <n-form-item label="基层党委审批意见落款时间" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-date-picker
                v-model:formatted-value="formValue.applicationVolunteer.baseCommitteeApprovalOpinionDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择落款时间"
                style="width: 100%"
                class="rounded-lg"
                size="large"
                @update:formatted-value="handleInputChange"
              />
            </n-form-item>
          </n-gi>
        </n-grid>
      </n-card>

      <!-- 分割线 -->
      <div class="relative my-8">
        <div class="absolute inset-0 flex items-center" aria-hidden="true">
          <div class="w-full border-t border-gray-300"></div>
        </div>
        <div class="relative flex justify-center">
          <span class="px-3 bg-white text-lg font-medium text-gray-900">转正阶段</span>
        </div>
      </div>

      <!-- 转正阶段 -->
      <n-card class="mb-6 rounded-2xl border-0 shadow-lg bg-white overflow-hidden" title="" :bordered="false">
        <template #header>
          <div class="flex items-center gap-3 py-2">
            <n-icon class="text-xl text-green-500" :component="CheckmarkDoneIcon" />
            <span class="text-lg font-semibold text-gray-800">预备党员转正阶段</span>
          </div>
        </template>

        <n-grid :cols="12" :x-gap="16" :y-gap="12">
          <!-- 转正决议 -->
          <n-gi :span="12">
            <div class="mb-4 pb-3 border-b border-slate-100">
              <h4 class="text-md font-medium text-slate-700 mb-3 flex items-center gap-2">
                <n-icon :component="DocumentTextIcon" class="text-green-400" />
                转正决议
              </h4>
            </div>
          </n-gi>
          <n-gi :span="6">
            <n-form-item label="预备党员转正决议签名" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-input
                v-model:value="formValue.applicationVolunteer.probationaryConversionResolutionSignature"
                placeholder="请输入签名人姓名"
                class="rounded-lg"
                size="large"
                @update:value="handleInputChange"
              />
            </n-form-item>
          </n-gi>
          <n-gi :span="6">
            <n-form-item label="预备党员转正决议落款时间" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-date-picker
                v-model:formatted-value="formValue.applicationVolunteer.probationaryConversionResolutionDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择落款时间"
                style="width: 100%"
                class="rounded-lg"
                size="large"
                @update:formatted-value="handleInputChange"
              />
            </n-form-item>
          </n-gi>

          <!-- 审查信息 -->
          <n-gi :span="12">
            <div class="mb-4 pb-3 border-b border-slate-100">
              <h4 class="text-md font-medium text-slate-700 mb-3 flex items-center gap-2">
                <n-icon :component="CheckmarkCircleIcon" class="text-green-400" />
                审查信息
              </h4>
            </div>
          </n-gi>
          <n-gi :span="6">
            <n-form-item label="党总支审查预备期落款时间" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-date-picker
                v-model:formatted-value="formValue.applicationVolunteer.generalBranchReviewProbationDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择落款时间"
                style="width: 100%"
                class="rounded-lg"
                size="large"
                @update:formatted-value="handleInputChange"
              />
            </n-form-item>
          </n-gi>
          <n-gi :span="6">
            <n-form-item label="基层党委审查预备期落款时间" label-placement="top" :label-style="{ fontSize: '14px', fontWeight: '500' }">
              <n-date-picker
                v-model:formatted-value="formValue.applicationVolunteer.baseCommitteeReviewProbationDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="请选择落款时间"
                style="width: 100%"
                class="rounded-lg"
                size="large"
                @update:formatted-value="handleInputChange"
              />
            </n-form-item>
          </n-gi>
        </n-grid>
      </n-card>

    </n-form>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import {
  NForm, NFormItem, NGrid, NGi, NInput, 
  NDatePicker, NCard, NIcon
} from 'naive-ui'
import { 
  DocumentText as DocumentTextIcon,
  InformationCircle as InfoIcon,
  Person as PersonIcon,
  People as PeopleIcon,
  Business as BusinessIcon,
  Document as DocumentIcon,
  PersonAdd as PersonAddIcon,
  CheckmarkDone as CheckmarkDoneIcon,
  CheckmarkCircle as CheckmarkCircleIcon
} from '@vicons/ionicons5'

const props = defineProps({
  member: {
    type: Object,
    required: true
  }
})

const formRef = ref(null)

// 初始化数据
const initializeData = (memberData) => {
  // 确保applicationVolunteer对象存在
  if (!memberData.applicationVolunteer) {
    memberData.applicationVolunteer = {
      personalSignatureDate: null,
      sponsor1Signature: '',
      sponsor1SignatureDate: null,
      sponsor2Signature: '',
      sponsor2SignatureDate: null,
      branchMeetingSecretaryName: '',
      branchMeetingSignatureDate: null,
      designatedTalkDate: null,
      generalBranchReviewDate: null,
      baseCommitteeApprovalOpinionDate: null,
      probationaryConversionResolutionSignature: '',
      probationaryConversionResolutionDate: null,
      generalBranchReviewProbationDate: null,
      baseCommitteeReviewProbationDate: null
    }
  }
  return memberData
}

const formValue = ref(initializeData({...props.member}))

// 定义emit
const emit = defineEmits(['auto-save'])

// 提示信息配置
const tipMessages = ref([
  '入党志愿书是发展党员过程中的重要文件，请认真填写',
  '所有签名应使用真实姓名，与身份证一致',
  '所有日期格式均为YYYY-MM-DD',
  '确保各阶段时间顺序合理，符合发展党员流程',
  '信息填写后系统将自动保存'
])

// 处理输入变化，触发自动保存
const handleInputChange = () => {
  // 使用防抖，避免频繁触发自动保存
  if (window.autoSaveTimeout) {
    clearTimeout(window.autoSaveTimeout)
  }
  
  window.autoSaveTimeout = setTimeout(() => {
    emit('auto-save')
  }, 1000) // 1秒后触发自动保存
}

onMounted(() => {
  // 可以在这里添加额外的初始化逻辑
})

watch(() => props.member, (newVal) => {
  formValue.value = initializeData({...newVal})
})

defineExpose({
  getEditedData: () => {
    console.log('ApplicationVolunteerEditor - getEditedData called')
    console.log('ApplicationVolunteerEditor - applicationVolunteer:', formValue.value.applicationVolunteer)
    
    // 直接返回 applicationVolunteer 对象，匹配 API 期望的数据结构
    return formValue.value.applicationVolunteer
  }
})
</script>